<template>
  <div>
    <b-tabs pills justified nav-class="newtabs" content-class="text-muted">
      <b-tab active class="border-0">
        <template v-slot:title>
          <span class="d-inline-block d-sm-none">
            <i class="fas fa-home"></i>
          </span>
          <span class="d-none d-sm-inline-block">自媒体号</span>
        </template>
        <div class="states-type" style="margin-bottom: 10px;">
          <span class="type-title">账号分类:</span>
          <div class="btns" :class="{'display_':accountNumType}">
            <button
              type="button"
              class="btn btn-light rounded-pill btn-sm states-type-item"
              :class="{ isActive: accountNumChange == item.index }"
              v-for="item in accountNum"
              :key="item.index"
              @click="accountNumItem(item)"
            >
              {{ item.name }}
            </button>
          </div>
          <div class="operation">
            <span class="pointer" v-if="accountNumType" @click="accountNumType=false">更多<i class="ri-arrow-down-s-line"></i></span>
            <span class="pointer" v-else @click="accountNumType=true">收起<i class="ri-arrow-up-s-line"></i></span>
          </div>
        </div>
        <weMediaNumTransaction />
      </b-tab>
      <b-tab>
        <template v-slot:title>
          <span class="d-inline-block d-sm-none">
            <i class="far fa-user"></i>
          </span>
          <span class="d-none d-sm-inline-block">自媒体文章</span>
        </template>
        <div class="states-type">
          <span class="type-title">行业分类:</span>
          <div class="btns" :class="{'display_':industryType}">
            <button
              type="button"
              class="btn btn-light rounded-pill btn-sm states-type-item"
              :class="{ isActive: siteChange == item.index }"
              v-for="item in sitetype"
              :key="item.index"
              @click="allSites(item)"
            >
              {{ item.name }}
            </button>
          </div>
          <div class="operation">
            <span class="pointer" v-if="industryType" @click="industryType=false">更多<i class="ri-arrow-down-s-line"></i></span>
            <span class="pointer" v-else @click="industryType=true">收起<i class="ri-arrow-up-s-line"></i></span>
          </div>
        </div>
        <div class="states-time">
          <span class="time-title">事件分类:</span>
          <div class="btns" :class="{'display_':eventType}">
            <button
              type="button"
              class="btn btn-light rounded-pill btn-sm states-time-item"
              :class="{ isActive: eventChange == item.index }"
              v-for="item in event"
              :key="item.index"
              @click="eventItem(item)"
            >
              {{ item.name }}
            </button>
          </div>
          <div class="operation">
            <span class="pointer" v-if="eventType" @click="eventType=false">更多<i class="ri-arrow-down-s-line"></i></span>
            <span class="pointer" v-else @click="eventType=true">收起<i class="ri-arrow-up-s-line"></i></span>
          </div>
        </div>
        <div class="states-time">
          <span class="time-title">文章分类:</span>
          <div class="btns" :class="{'display_':articleType}">
            <button
              type="button"
              class="btn btn-light rounded-pill btn-sm states-time-item"
              :class="{ isActive: articleChange == item.index }"
              v-for="item in article"
              :key="item.index"
              @click="articleItem(item)"
            >
              {{ item.name }}
            </button>
          </div>
          <div class="operation">
            <span class="pointer" v-if="articleType" @click="articleType=false">更多<i class="ri-arrow-down-s-line"></i></span>
            <span class="pointer" v-else @click="articleType=true">收起<i class="ri-arrow-up-s-line"></i></span>
          </div>
        </div>
        <div class="row col-md-12">
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label col-offset-1"
                >情感分类</label
              >
              <div class="col-md-8">
                <select class="form-control .col-md-offset-2">
                  <option>积极</option>
                  <option>消极</option>
                  <option>中性</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label col-offset-1"
                >数据来源</label
              >
              <div class="col-md-8">
                <select class="form-control">
                  <option>数据来源</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group row">
              <label class="col-md-2 padding-right col-form-label"
                >日期范围</label
              >
              <div class="col-md-10">
                <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="row col-md-12">
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label"
                >涉及机构</label
              >
              <div class="col-md-8">
                <select class="form-control">
                  <option>政府</option>
                  <option>学校</option>
                  <option>医院</option>
                  <option>银行</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label col-offset-1"
                >涉及企业</label
              >
              <div class="col-md-8">
                <select class="form-control">
                  <option>非上市</option>
                  <option>BTA</option>
                  <option>TMD</option>
                  <option>央企</option>
                  <option>国内巨头</option>
                  <option>国外巨头</option>
                  <option>世界五百强</option>
                  <option>中国五百强</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label">高科技型企业</label>
              <div class="col-md-8">
                <select class="form-control">
                  <option>全部</option>
                  <option>独角兽企业</option>
                  <option>瞪羚羊</option>
                  <option>培育独角兽</option>
                  <option>专精特</option>
                  <option>高新技术企业</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group row">
              <label class="col-md-4 padding-right col-form-label col-offset-1"
                >涉及上市公司</label
              >
              <div class="col-md-8">
                <select class="form-control">
                  <option>全部</option>
                  <option>科创板</option>
                  <option>新三板</option>
                  <option>新四板</option>
                  <option>纽交所</option>
                  <option>纳斯达克</option>
                  <option>香港上市</option>
                  <option>主板上市</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <weMediaArticleTransaction />
      </b-tab>
    </b-tabs>
  </div>
</template>
<script>
import weMediaNumTransaction from "./weMediaNumTransaction";
import weMediaArticleTransaction from "./weMediaArticleTransaction";
export default {
  components: {
    weMediaNumTransaction,
    weMediaArticleTransaction,
  },
  data () {
    return {
      // 账号分类
      accountNum: [
        {
          name: "全部",
          index: 1,
        },{
          name: "搞笑",
          index: 2,
        },{
          name: "企业",
          index: 3,
        },{
          name: "新时代",
          index: 4,
        },{
          name: "情感",
          index: 5,
        },{
          name: "社会",
          index: 6,
        },{
          name: "电视剧",
          index: 7,
        },{
          name: "美食",
          index: 8,
        },{
          name: "国际体育",
          index: 9,
        },{
          name: "数码",
          index: 10,
        },{
          name: "综艺",
          index: 11,
        },{
          name: "时尚",
          index: 12,
        },{
          name: "星座",
          index: 13,
        },{
          name: "军事",
          index: 14,
        },{
          name: "股市",
          index: 15,
        },{
          name: "科普",
          index: 16,
        },{
          name: "动漫",
          index: 17,
        },{
          name: "运动健身",
          index: 18,
        },{
          name: "旅游",
          index: 19,
        },{
          name: "瘦身",
          index: 20,
        },{
          name: "历史",
          index: 21,
        },{
          name: "艺术",
          index: 22,
        },{
          name: "美妆",
          index: 23,
        },{
          name: "法律",
          index: 24,
        },{
          name: "设计",
          index: 25,
        },{
          name: "健康",
          index: 26,
        },{
          name: "新鲜事",
          index: 27,
        },{
          name: "音乐",
          index: 28,
        },{
          name: "问答政务",
          index: 29,
        },{
          name: "养生",
          index: 30,
        },{
          name: "育儿",
          index: 31,
        },{
          name: "宗教",
          index: 32,
        },{
          name: "抽奖",
          index: 33,
        },{
          name: "国学",
          index: 34,
        },{
          name: "教育",
          index: 35,
        },{
          name: "婚恋",
          index: 36,
        },{
          name: "舞蹈",
          index: 37,
        },{
          name: "辟谣",
          index: 38,
        },{
          name: "吃鸡",
          index: 39,
        },{
          name: "英雄联盟",
          index: 40,
        },{
          name: "电竞",
          index: 41,
        },{
          name: "三农财经",
          index: 42,
        },{
          name: "读书",
          index: 43,
        },{
          name: "摄影",
          index: 44,
        },{
          name: "汽车",
          index: 45,
        },{
          name: "美女",
          index: 46,
        },{
          name: "春节档",
          index: 47,
        },{
          name: "房产",
          index: 48,
        },{
          name: "家居",
          index: 49,
        },{
          name: "萌宠",
          index: 50,
        },{
          name: "科技",
          index: 51,
        },{
          name: "游戏",
          index: 52,
        },{
          name: "校园",
          index: 53,
        },{
          name: "收藏",
          index: 54,
        },{
          name: "公益",
          index: 55,
        }
      ],
      accountNumChange: 1,
      accountNumType: true,
      // 行业分类
      sitetype: [
        {
          name: "全部",
          index: 1,
        },{
          name: "证券期货",
          index: 2,
        },{
          name: "体育产业",
          index: 3,
        },{
          name: "医疗行业",
          index: 4,
        },{
          name: "教育行业",
          index: 5,
        },{
          name: "房产行业",
          index: 6,
        },{
          name: "银行业",
          index: 7,
        },{
          name: " 政府部门",
          index: 8,
        },{
          name: "互联网",
          index: 9,
        },{
          name: "汽车行业",
          index: 10,
        },{
          name: "农业服务",
          index: 11,
        },{
          name: "文化传媒",
          index: 12,
        },{
          name: "法律司法",
          index: 13,
        },{
          name: "生活服务",
          index: 14,
        },{
          name: " 酒店餐饮",
          index: 15,
        },{
          name: "旅游行业",
          index: 16,
        },{
          name: "商贸零售",
          index: 17,
        },{
          name: "信息技术",
          index: 18,
        },{
          name: "航空运输",
          index: 19,
        },{
          name: "交通出行",
          index: 20,
        },{
          name: "制药行业",
          index: 21,
        },{
          name: "电力电网",
          index: 22,
        },{
          name: "游戏行业",
          index: 23,
        },{
          name: "物流行业",
          index: 24,
        },{
          name: "生物医药",
          index: 25,
        },{
          name: " 纺织服装",
          index: 26,
        },{
          name: "集成电路",
          index: 27,
        },{
          name: "环保节能",
          index: 28,
        },{
          name: "保险行业",
          index: 29,
        },{
          name: "煤炭开采",
          index: 30,
        },{
          name: "其他",
          index: 31,
        }
      ],
      siteChange: 1,
      industryType: true,
      // 事件分类
      event: [
        {
          name: "全部",
          index: 1,
        },{
          name: " 网事小说",
          index: 2,
        },{
          name: "项目规划",
          index: 3,
        },{
          name: "竞技比赛",
          index: 4,
        },{
          name: "疫情防控",
          index: 5,
        },{
          name: "事件突发",
          index: 6,
        },{
          name: "业绩优异",
          index: 7,
        },{
          name: " 投资融资",
          index: 8,
        },{
          name: "职务调整",
          index: 9,
        },{
          name: "政策影响",
          index: 10,
        },{
          name: "招商引资",
          index: 11,
        },{
          name: "路演活动",
          index: 12,
        },{
          name: "产品问题",
          index: 13,
        },{
          name: "增资募资",
          index: 14,
        },{
          name: " 行业研究",
          index: 15,
        },{
          name: "行业竞争",
          index: 16,
        },{
          name: "项目验收",
          index: 17,
        },{
          name: "战略合作",
          index: 18,
        },{
          name: "历史事件",
          index: 19,
        },{
          name: "乡村振兴",
          index: 20,
        },{
          name: "诈骗欺诈",
          index: 21,
        },{
          name: "股市公告",
          index: 22,
        },{
          name: "党建活动",
          index: 23,
        },{
          name: "新品发布",
          index: 24,
        },{
          name: "榜上有名",
          index: 25,
        },{
          name: " 拟定上市",
          index: 26,
        },{
          name: "荣获奖项",
          index: 27,
        },{
          name: "业绩下滑",
          index: 28,
        },{
          name: "诉讼纠纷",
          index: 29,
        },{
          name: "违法违规",
          index: 30,
        },{
          name: "其他",
          index: 31,
        }
      ],
      eventChange: 1,
      eventType: true,
      // 文章分类
      article: [
        {
          name: "全部",
          index: 1,
        },{
          name: "社会",
          index: 2,
        },{
          name: "教育",
          index: 3,
        },{
          name: "财经",
          index: 4,
        },{
          name: "娱乐",
          index: 5,
        },{
          name: "健康",
          index: 6,
        },{
          name: "时事",
          index: 7,
        },{
          name: " 体育",
          index: 8,
        },{
          name: "汽车",
          index: 9,
        },{
          name: "游戏",
          index: 10,
        },{
          name: "科技",
          index: 11,
        },{
          name: "军事",
          index: 12,
        },{
          name: "音乐",
          index: 13,
        },{
          name: "国际",
          index: 14,
        },{
          name: " 房产",
          index: 15,
        },{
          name: "综合",
          index: 16,
        }
      ],
      articleChange: 1,
      articleType: true,
      pickerOptions: {
        shortcuts: [
          {
            text: "24小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime());
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: "",
    }
  },
  methods: {
    // 账号类型
    accountNumItem(item) {
      this.accountNumChange = item.index;
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    //事件分类
    eventItem(item) {
      this.eventChange = item.index;
    },
    //事件分类
    articleItem(item) {
      this.articleChange = item.index;
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  display: flex;
  .type-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .time-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.btns{
  width: 85%;
  overflow: hidden;
}
.display_{
  height: 38px;
}
.operation{
  width: 9%;
  text-align: right;
  padding-top: 2px;
  i{
    vertical-align: bottom;
  }
}
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.row {
  .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,
    ::v-deep .el-range-separator {
      line-height: 1.7rem;
    }
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.col-md-12,.col-md-8,.col-md-10{
  padding-left: 0;
}
::v-deep .newtabs{
  display: block;
  li{
    display: inline-block;
  }
}
</style>
